<script setup lang="ts">
import { useCounterStore } from "@/stores/counter";
import { ref, onMounted } from "vue";
import { getcomment } from "@/api/comment";
import { gethospitalAllInfo } from "@/api/hospital";
import type { Ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
function onClickLeft() {
  router.back();
}
const use = useCounterStore();
interface ICommentList {
  id: number;
  name: string;
  desc: string;
  time: string;
  data: string;
}

interface IList {
  grade: string;
  name: string;
  image: string;
  text: string;
}
const list: any = ref([{ grade: "", name: "", image: "", text: "" }]);
const commentList: Ref<ICommentList[]> = ref([]);
onMounted(() => {
  gethospitalAllInfo({ id: use.hospitalInfo }).then((res) => {
    list.value = res.data;
    // console.log(list.value);
  });
  getcomment().then((res) => {
    commentList.value = res.data.data;
  });
});
</script>
<template>
  <div class="header">
    <van-nav-bar title="医院详情页" left-arrow @click-left="onClickLeft" />
  </div>
  <div class="box">
    <van-card
      :desc="list[0].grade"
      :title="list[0].name"
      :thumb="list[0].image"
    />
    <div class="evaluate_box">
      <h3>患者评价</h3>
      <div v-for="item in commentList" >
        <p>{{ item.desc }}</p>
        <span style="margin-right: 0.1rem">{{ item.name }}</span>
        <span style="margin-right: 0.1rem">{{ item.data }}</span>
        <span style="float: right">{{ item.time }}</span>
      </div>
    </div>

    <div class="evaluate_box">
      <h3>医院简介</h3>
      <div>{{ list[0].text }}</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.van-nav-bar {
  background-color: #f7fdff;
}

p{
    padding: 0;
    margin: 0;
}
.evaluate_box{
    margin: 0 5%;
    div{
        background-color: #fff;
        padding: .1rem;
        line-height: .2rem;
        margin: .1rem 0;
        border-radius: .15rem;
        box-shadow: .03rem .03rem .1rem skyblue;
    }
}
</style>
